<template>
  <div class="wrapper">
    <!-- <div class="pageTurning pageTurningPre" @click="turnPagePre" style="margin-right: 20px;">
      <svg-icon icon-name="arrow" style="width: 23px; height: 23px"></svg-icon>
    </div> -->
    <div class="left">
      <div class="border">
        <div class="title">求职动机</div>
        <div class="leftHeader" style="height: 36vh">
          <!--柱状图展示  各城市的岗位数-->
        </div>
      </div>

      <div class="border" style="margin-top: 10px">
        <div class="title">不同渠道入职人数</div>
        <div class="centertop" style="height: 38vh"></div>
      </div>
    </div>
    <div class="center">
      <div class="border" style="display: flex; justify-content: space-around">
        <!-- <div class="centerleft" style="height: 20vh;width: 40vh;">
        </div> -->
        <div class="echarts-liquidfill">
          <div
            ref="chartContainer1"
            :style="{ width: size, height: size }"
          ></div>
          <div>发布的岗位</div>
        </div>
        <div class="echarts-liquidfill">
          <div
            ref="chartContainer2"
            :style="{ width: size, height: size }"
          ></div>
          <div>接收的简历</div>
        </div>
        <div class="echarts-liquidfill">
          <div
            ref="chartContainer3"
            :style="{ width: size, height: size }"
          ></div>
          <div>公司的总浏览量</div>
        </div>
        <!-- <div class="centercenter" style="margin-left: 10px;margin-right: 10px;height: 20vh;width: 40vh;">
        </div>
        <div class="centerright" style="height: 20vh;width: 40vh;">
        </div> -->
      </div>
      <div style="width: 100%; height: 40%">
        <EnterpriseBuilding />
      </div>
      <div
        class="border"
        style="
          margin-top: 0.3vw;
          width: 100%;
          height: 40%;
          position: absolute;
          top: 52vh;
          right: 0vh;
        "
      >
        <div class="title">前 10 高校王牌专业</div>
        <div class="rightHeader">
          <table>
            <thead>
              <tr>
                <th></th>
                <th>大学名称</th>
                <th>王牌专业</th>
                <th>专业评分</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.rank }}</td>
                <td>{{ item.university }}</td>
                <td>{{ item.program }}</td>
                <td>{{ item.score }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 词云图 -->
      <!-- <div class="border" style=" height: 41.6vh">
        <employWordcloud />
      </div> -->
      <!-- <div class="border" style=" margin-top: 10px">
        <div class="title">牛人概览</div>
        <div class="centerbottom" style="height: 38vh"></div>
      </div> -->
    </div>
    <div class="right">
      <div class="border">
        <div class="title">各行业求职者期望月薪</div>
        <div class="righttop" style="height: 36vh"></div>
      </div>
      <div class="border" style="margin-top: 10px">
        <div class="title">近三年全国毕业生学历比例</div>
        <div class="rightbottom" style="height: 38vh"></div>
      </div>
    </div>
    <!-- <div class="pageTurning pageTurningNext" @click="turnPageNext" style="margin-left: 20px;">
      <svg-icon class="flipArrow" icon-name="arrow" style="width: 23px; height: 23px"></svg-icon>
    </div> -->
    <!-- 完善用户信息弹窗 -->
    <UserInfo ref="improveUserInfo"></UserInfo>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { getCityPositionByName } from "../assets/js/cityPostion";
import {
  employment,
  jobMotivation,
  education,
  regionalEmployment,
  salary,
  experienceDistribution,
  educationDistribution,
  salsalaryDistributionary,
  topUniversities,
  recruitmentChannelsVO,
} from "../api/visualizationData";
import * as echarts from "echarts";
import "echarts-wordcloud";
import { ElMessage } from "element-plus";
import "../assets/js/china.js";
import UserInfo from "../components/improveUserInformation.vue";
import employWordcloud from "../components/employWordcloud.vue";
import { useUserInfor } from "@/stores/userInfo";
import * as commonUtil from "@/utils/commonUtil";
import EnterpriseBuilding from "@/components/3dEnterbuilding.vue";
import "echarts-liquidfill";
import { getCount } from "@/api/userInformation";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const userStore = useUserInfor();

// components:{map}
onMounted(() => {
  // 初始化柱状图(近两年来就业人数)
  let barChart = echarts.init(document.querySelector(".leftHeader"));
  // 获取数据
  const getlineChartData = async () => {
    const res = await jobMotivation();
    if (res.code === 200) {
      // const industryNames = res.data.map((item) => item.industryName);
      // const employment2022 = res.data.map((item) => item.employment2022);
      // const employment2023 = res.data.map((item) => item.employment2023);

      const factors = res.data.map((item) => item.factor); // 指标名称
      const overallPercentages = res.data.map((item) => item.overallPercentage); // 总体百分比
      const post00Percentages = res.data.map((item) => item.post00Percentage); // 00后百分比
      // 定义位置列表
      const posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];

      // 配置参数
      const app = {
        configParameters: {
          rotate: {
            min: -90,
            max: 90,
          },
          align: {
            options: {
              left: "left",
              center: "center",
              right: "right",
            },
          },
          verticalAlign: {
            options: {
              top: "top",
              middle: "middle",
              bottom: "bottom",
            },
          },
          position: {
            options: posList.reduce(function (map, pos) {
              map[pos] = pos;
              return map;
            }, {}),
          },
          distance: {
            min: 0,
            max: 100,
          },
        },
        config: {
          rotate: 90,
          align: "left",
          verticalAlign: "middle",
          position: "insideBottom",
          distance: 15,

          onChange: function () {
            const labelOption = {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance,
            };
            barChart.setOption({
              series: [
                {
                  label: labelOption,
                },
                {
                  label: labelOption,
                },
              ],
            });
          },
        },
      };

      // 标签配置
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 12,
        color: "#fff",
        rich: {
          name: {},
        },
      };

      // 指定柱状图配置项和数据
      const barChartOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            let result = params[0].axisValue + "<br>"; // 横轴名称（如时间、类别）
            params.forEach((item) => {
              result += `${item.seriesName}: ${item.value}%<br>`; // 在每个值后加 %
            });
            return result;
          },
        },
        legend: {
          data: ["总体百分比", "00后百分比"],
          textStyle: {
            color: "#000", // 设置图例字体颜色为白色
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: factors,
            axisLabel: {
              interval: 0, // 如果数据量大于 10，则每隔两个标签显示一个
              color: "#000", // X轴标签字体颜色
              rotate: -36,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总体百分比",
            type: "bar",
            barGap: 0,
            itemStyle: {
              color: {
                type: "linear", // 渐变类型，linear 线性渐变
                x: 0, // 渐变起始点的 x 坐标
                y: 1, // 渐变起始点的 y 坐标
                x2: 0, // 渐变结束点的 x 坐标
                y2: 0, // 渐变结束点的 y 坐标
                colorStops: [
                  // 渐变颜色的节点
                  {
                    offset: 0,
                    color: "#2999ff", // 起始颜色（顶部）
                  },
                  {
                    offset: 1,
                    color: "rgba(41, 153, 255, 0)", // 结束颜色（底部透明）
                  },
                ],
                global: false, // 是否全局渐变
              },
              // barBorderRadius: [10, 10, 0, 0], // 顶部为圆角，底部为方形
            },
            label: labelOption,
            emphasis: {
              itemStyle: {
                color: {
                  type: "linear", // 渐变类型，linear 线性渐变
                  x: 0, // 渐变起始点的 x 坐标
                  y: 0, // 渐变起始点的 y 坐标
                  x2: 0, // 渐变结束点的 x 坐标
                  y2: 1, // 渐变结束点的 y 坐标
                  colorStops: [
                    // 渐变颜色的节点
                    {
                      offset: 0,
                      color: "#2999ff", // 起始颜色（顶部）
                    },
                    {
                      offset: 1,
                      color: "rgba(41, 153, 255, 0)", // 结束颜色（底部透明）
                    },
                  ],
                  global: false, // 是否全局渐变
                },
                // barBorderRadius: [10, 10, 0, 0], // 顶部为圆角，底部为方形
              },
            },
            data: overallPercentages,
          },
          {
            name: "00后百分比",
            type: "bar",
            barGap: 0,
            itemStyle: {
              color: {
                type: "linear", // 渐变类型，linear 线性渐变
                x: 0, // 渐变起始点的 x 坐标
                y: 1, // 渐变起始点的 y 坐标
                x2: 0, // 渐变结束点的 x 坐标
                y2: 0, // 渐变结束点的 y 坐标
                colorStops: [
                  // 渐变颜色的节点
                  {
                    offset: 0,
                    color: "#42f2ff", // 起始颜色（顶部）
                  },
                  {
                    offset: 1,
                    color: "rgba(41, 153, 255, 0)", // 结束颜色（底部透明）
                  },
                ],
                global: false, // 是否全局渐变
              },
              // barBorderRadius: [10, 10, 0, 0], // 顶部为圆角，底部为方形
            },
            label: labelOption,
            emphasis: {
              itemStyle: {
                color: {
                  type: "linear", // 渐变类型，linear 线性渐变
                  x: 0, // 渐变起始点的 x 坐标
                  y: 0, // 渐变起始点的 y 坐标
                  x2: 0, // 渐变结束点的 x 坐标
                  y2: 1, // 渐变结束点的 y 坐标
                  colorStops: [
                    // 渐变颜色的节点
                    {
                      offset: 0,
                      color: "#42f2ff", // 起始颜色（顶部）
                    },
                    {
                      offset: 1,
                      color: "rgba(41, 153, 255, 0)", // 结束颜色（底部透明）
                    },
                  ],
                  global: false, // 是否全局渐变
                },
                // barBorderRadius: [10, 10, 0, 0], // 顶部为圆角，底部为方形
              },
            },
            data: post00Percentages,
          },
        ],
      };
      window.addEventListener("resize", () => {
        barChart.resize();
      });
      // 将配置项设置给 ECharts 实例对象，使用刚指定的配置项和数据显示图表
      barChart.setOption(barChartOption);
    }
  };
  // 调用函数获取数据并生成柱状图
  getlineChartData();

  // 初始化雷达图（求职动机）
  // let radarChart = echarts.init(document.querySelector(".centerbottom"));

  // const getRadarChart = async () => {
  //   const res = await jobMotivation();
  //   if (res.code === 200) {
  //     // 提取数据
  //     const factors = res.data.map((item) => item.factor); // 指标名称
  //     const overallPercentages = res.data.map((item) => item.overallPercentage); // 总体百分比
  //     const post00Percentages = res.data.map((item) => item.post00Percentage); // 00后百分比

  //     // 雷达图配置
  //     const option = {
  //       tooltip: {
  //         trigger: "item", // 鼠标悬停触发类型为“item”，即单个节点
  //         formatter: function (params) {
  //           console.log(params);

  //           const factor = params.indicator; // 当前指标名称
  //           const seriesIndex = params.seriesIndex; // 当前系列的索引
  //           const dataIndex = params.dataIndex; // 当前数据的索引

  //           // 获取当前指标的总体百分比和00后百分比
  //           const overallValue = overallPercentages[dataIndex];
  //           const post00Value = post00Percentages[dataIndex];

  //           // 根据系列索引判断当前点属于哪个系列
  //           if (seriesIndex === 0) {
  //             // 当前系列是“总体百分比”
  //             return `
  //       <div style="font-size: 14px; color: #333;">
  //         <strong>${factor}</strong><br/>
  //         总体百分比: ${overallValue}%<br/>
  //       </div>
  //     `;
  //           } else if (seriesIndex === 1) {
  //             // 当前系列是“00后百分比”
  //             return `
  //       <div style="font-size: 14px; color: #333;">
  //         <strong>${factor}</strong><br/>
  //         零零后百分比: ${post00Value}%<br/>
  //       </div>
  //     `;
  //           }
  //         },
  //       },
  //       legend: {
  //         data: ["总体百分比", "零零后百分比"],
  //         textStyle: {
  //           color: "#fff", // 设置图例字体颜色为白色
  //         },
  //         left: 0,
  //       },
  //       radar: {
  //         //遍历数组
  //         indicator: factors.map((factor) => ({
  //           name: factor,
  //           max: 100, // 因为数据是百分比，所以最大值设置为100
  //         })),
  //       },
  //       series: [
  //         {
  //           type: "radar",
  //           data: [
  //             {
  //               value: overallPercentages,
  //               name: "总体百分比",
  //             },
  //             {
  //               value: post00Percentages,
  //               name: "零零后百分比",
  //             },
  //           ],
  //         },
  //       ],
  //     };

  //     // 设置雷达图的配置
  //     radarChart.setOption(option);
  //   } else {
  //     console.error("Failed to load radar chart data:", res.msg);
  //   }
  // };

  // getRadarChart();

  //boss直聘数据（折线图）
  // let lineChart = echarts.init(document.querySelector(".centerbottom"));
  // var option = {
  //   tooltip: {
  //     trigger: 'axis'
  //   },
  //   legend: {
  //     data: ['工作经验', '最高学历', '薪资期望']
  //   },
  //   grid: {
  //     left: '3%',
  //     right: '4%',
  //     bottom: '3%',
  //     containLabel: true
  //   },
  //   toolbox: {
  //     feature: {
  //       saveAsImage: {}
  //     }
  //   },
  //   xAxis: {
  //     type: 'category',
  //     boundaryGap: false,
  //     data: ['1年以内', '1-3年', '3-5年', '5-10年', '10年以上']
  //   },
  //   yAxis: {
  //     type: 'value'
  //   },
  //   series: [
  //     {
  //       name: '工作经验',
  //       type: 'line',
  //       data: [18, 19, 13, 32, 22]
  //     },
  //     {
  //       name: '最高学历',
  //       type: 'line',
  //       data: [7, 15, 23, 46, 10]
  //     },
  //     {
  //       name: '薪资期望',
  //       type: 'line',
  //       data: [11, 13, 18, 25, 22]
  //     }
  //   ]
  // };

  // // 使用刚指定的配置项和数据显示图表。
  // lineChart.setOption(option);

  // 初始化旭日图（毕业生学历比例）
  let sunChart = echarts.init(document.querySelector(".rightbottom"));

  const getsunChart = async () => {
    const res = await education();
    if (res.code === 200) {
      const sunburstData = {
        name: "学历分布",
        children: res.data.map((item, index) => ({
          name: item.educationLevel,
          itemStyle: { color: ["#2999ff", "#42f2ff", "#0077C2"][index % 3] }, // 为每个学历分配颜色
          children: [
            {
              name: "2022年",
              value: item.year2021,
              itemStyle: {
                color: ["#2999ff", "#42f2ff", "#0077C2"][index % 3],
              },
            },
            {
              name: "2023年",
              value: item.year2022,
              itemStyle: {
                color: ["#2999ff", "#42f2ff", "#0077C2"][index % 3],
              },
            },
            {
              name: "2024年",
              value: item.year2023,
              itemStyle: {
                color: ["#2999ff", "#42f2ff", "#0077C2"][index % 3],
              },
            },
          ],
        })),
      };

      const newData = sunburstData.children;

      const option = {
        tooltip: {
          formatter: ({ name, value }) =>
            `${name}: ${value ? value.toFixed(2) : ""}`, //鼠标悬停显示数据
        },
        series: [
          {
            type: "sunburst",
            data: newData, // 使用新的根节点数据
            radius: [0, "95%"],
            label: {
              formatter: "{b}", // 显示子节点名称
            },
            levels: [
              {
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "#fff",
                },
                label: {
                  rotate: 0,
                  color: "#333",
                  fontSize: 14, // 可以适当调整根节点文字大小
                  fontWeight: "bold",
                },
              },
              {
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "#fff",
                },
              },
            ],
          },
        ],
      };
      window.addEventListener("resize", () => {
        sunChart.resize();
      });
      // 设置旭日图的配置
      sunChart.setOption(option);
    }
  };

  // 调用函数加载旭日图
  getsunChart();

  // let majorChart = echarts.init(document.querySelector(".righttop"));
  // const getMajorChart = async () => {
  //   // 模拟数据 - 实际使用时替换为API返回数据
  //   const mockData = [
  //     { university: '清华大学', major: '计算机科学', strength: 95 },
  //     { university: '北京大学', major: '法学', strength: 90 },
  //     { university: '浙江大学', major: '人工智能', strength: 88 },
  //     { university: '复旦大学', major: '经济学', strength: 85 },
  //     { university: '上海交大', major: '电子信息', strength: 87 },
  //     { university: '南京大学', major: '天文学', strength: 83 },
  //     { university: '中国科大', major: '物理学', strength: 92 },
  //     { university: '武汉大学', major: '测绘科学', strength: 82 },
  //     { university: '华中科大', major: '机械工程', strength: 84 },
  //     { university: '中山大学', major: '医学', strength: 86 }
  //   ];

  //   // 准备矩阵图数据
  //   const categories = [...new Set(mockData.map(item => item.university))];
  //   const majors = [...new Set(mockData.map(item => item.major))];

  //   const data = mockData.map(item => [
  //     categories.indexOf(item.university),
  //     majors.indexOf(item.major),
  //     item.strength || 0
  //   ]);

  //   const option = {
  //     // title: {
  //     //   text: '高校王牌专业矩阵图',
  //     //   left: 'center',
  //     //   textStyle: {
  //     //     color: '#333'
  //     //   }
  //     // },
  //     tooltip: {
  //       position: 'top',
  //       formatter: function (params) {
  //         return `${categories[params.value[0]]}<br/>${majors[params.value[1]]}<br/>专业强度: ${params.value[2]}`;
  //       }
  //     },
  //     grid: {
  //       left: '3%',
  //       right: '7%',
  //       bottom: '15%',
  //       containLabel: true
  //     },
  //     xAxis: {
  //       type: 'category',
  //       data: categories,
  //       splitArea: {
  //         show: true
  //       },
  //       axisLabel: {
  //         interval: 0,
  //         rotate: 45
  //       }
  //     },
  //     yAxis: {
  //       type: 'category',
  //       data: majors,
  //       splitArea: {
  //         show: true
  //       }
  //     },
  //     visualMap: {
  //       min: 0,
  //       max: 100,
  //       calculable: true,
  //       orient: 'horizontal',
  //       left: 'center',
  //       bottom: '0%',
  //       inRange: {
  //         color: ['#2999ff', '#42f2ff', '#f2ff42', '#ff9d42']
  //       }
  //     },
  //     series: [{
  //       name: '专业强度',
  //       type: 'heatmap',
  //       data: data,
  //       label: {
  //         show: true,
  //         formatter: function (params) {
  //           return params.value[2];
  //         }
  //       },
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       },
  //       itemStyle: {
  //         borderColor: '#fff',
  //         borderWidth: 1
  //       },
  //       progressive: 1000,
  //       animation: false
  //     }]
  //   };

  //   // 设置图表配置
  //   majorChart.setOption(option);
  // };

  // // 调用函数初始化图表
  // getMajorChart();

  // // 响应式调整
  // window.addEventListener('resize', function () {
  //   majorChart.resize();
  // });

  // 初始化面积图（各省份就业人数）
  // let areaChart = echarts.init(document.querySelector(".righttop"));
  // const getareaChart = async () => {
  //   const res = await regionalEmployment(); // 假设 regionalEmployment 是一个异步请求函数
  //   if (res.code === 200) {
  //     // 提取数据
  //     const regions = res.data.map((item) => item.region); // 省份名称
  //     const employments2022 = res.data.map((item) => item.employment2022); // 2022年就业人数
  //     const employments2023 = res.data.map((item) => item.employment2023); // 2023年就业人数

  //     // 配置 ECharts 选项
  //     const option = {
  //       tooltip: {
  //         trigger: "axis",
  //         axisPointer: {
  //           type: "cross",
  //           label: {
  //             backgroundColor: "#6a7985",
  //           },
  //         },
  //       },
  //       legend: {
  //         data: ["2022年就业人数", "2023年就业人数"],
  //         textStyle: {
  //           color: "#333",
  //         },
  //       },
  //       toolbox: {
  //         feature: {
  //           saveAsImage: {},
  //         },
  //       },
  //       grid: {
  //         left: "3%",
  //         right: "4%",
  //         bottom: "3%",
  //         containLabel: true,
  //       },
  //       xAxis: [
  //         {
  //           type: "category",
  //           boundaryGap: false,
  //           data: regions, // 使用省份名称作为 X 轴数据
  //           axisLabel: {
  //             interval: 0, // 如果数据量大于 10，则每隔两个标签显示一个
  //             color: "#fff", // X轴标签字体颜色
  //             rotate: 0, // 文字水平显示
  //             formatter: function (value) {
  //               // 将每个字符用换行符分隔，实现竖着排列的效果
  //               return value.split("").join("\n");
  //             },
  //           },
  //         },
  //       ],
  //       yAxis: [
  //         {
  //           type: "value",
  //         },
  //       ],
  //       series: [
  //         {
  //           name: "2022年就业人数",
  //           type: "line",
  //           stack: "Total",
  //           areaStyle: {
  //             color: "#2999ff",
  //           },
  //           emphasis: {
  //             focus: "series",
  //           },
  //           data: employments2022, // 使用 2022 年就业人数
  //         },
  //         {
  //           name: "2023年就业人数",
  //           type: "line",
  //           stack: "Total",
  //           areaStyle: {
  //             color: "#42f2ff",
  //           },
  //           emphasis: {
  //             focus: "series",
  //           },
  //           data: employments2023, // 使用 2023 年就业人数
  //         },
  //       ],
  //     };

  //     // 设置 ECharts 图表的配置项
  //     areaChart.setOption(option);
  //   }
  // };
  // // 调用函数初始化图表
  // getareaChart();

  // 初始化横向柱状图（各行业月薪）
  let barsChart = echarts.init(document.querySelector(".righttop"));

  const getBarsChart = async () => {
    const res = await salary();
    if (res.code == 200) {
      const names = res.data.map((item) => item.name);
      const values = res.data.map((item) => item.value);

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 40,
          bottom: 30,
        },
        xAxis: {
          type: "value",
          position: "top",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "category",
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            show: false,
            rotate: 30, // 将 Y 轴标签旋转 30 度
            fontSize: 10,
            color: "#333",
          },
          data: names,
        },
        series: [
          {
            name: "2024年月薪",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              // position: "left", // 将标签位置设置为最左边
              formatter: "{b}", // 显示的标签内容
              fontSize: 10,
              color: "#333",
            },
            itemStyle: {
              color: {
                type: "linear", // 渐变类型，linear 线性渐变
                x: 1, // 渐变起始点的 x 坐标
                y: 0, // 渐变起始点的 y 坐标
                x2: 0, // 渐变结束点的 x 坐标
                y2: 0, // 渐变结束点的 y 坐标
                colorStops: [
                  // 渐变颜色的节点
                  {
                    offset: 0,
                    color: "#2999ff", // 起始颜色（顶部）
                  },
                  {
                    offset: 1,
                    color: "rgba(41, 153, 255, 0)", // 结束颜色（底部透明）
                  },
                ],
                global: false, // 是否全局渐变
              },
              // barBorderRadius: [10, 10, 0, 0], // 顶部为圆角，底部为方形
            },
            data: values.map((value) => ({
              value: value,
            })),
          },
        ],
      };
      window.addEventListener("resize", () => {
        barsChart.resize();
      });
      // 设置柱状图配置
      barsChart.setOption(option);
    }
  };

  // 调用函数生成柱状图
  getBarsChart();

  let polarChart = echarts.init(document.querySelector(".centertop")); // 假设使用同一个容器或修改为您的极坐标图容器

  const getPolarChart = async () => {
    const res = await recruitmentChannelsVO();
    if (res.code == 200) {
      // 提取2024年的数据
      const names = res.data.map((item) => item.name);
      const values = res.data.map((item) =>
        parseFloat(item.year2024.replace("%", ""))
      ); // 去掉百分号并转换为数字

      const option = {
        // title: {
        //   text: '不同渠道入职人数占比',
        //   left: 'center'
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}:{d}%",
        },
        // legend: {
        //   orient: 'vertical',
        //   right: 10,
        //   top: 'center',
        //   data: names
        // },
        series: [
          {
            name: "入职渠道",
            type: "pie",
            radius: ["30%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius", // 设置为玫瑰图
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              formatter: "{b}: {d}%",
              fontSize: 12,
            },
            labelLine: {
              length: 10,
              length2: 15,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
              },
            },
            data: names.map((name, index) => ({
              name: name,
              value: values[index],
              itemStyle: {
                color: getRandomColor(), // 可以为每个扇形设置不同颜色
              },
            })),
          },
        ],
      };
      // 响应式调整
      window.addEventListener("resize", function () {
        polarChart.resize();
      });
      // 设置极坐标图配置
      polarChart.setOption(option);
    }
  };

  // 辅助函数 - 生成随机颜色
  function getRandomColor() {
    const colors = [
      "#2999ff",
      "#71c4ef",
      "#d4eaf7",
      "#00BFFF",
      "#c8ffff",
      "#59a5f5",
      "#4e88ca",
    ];
    return colors[Math.floor(Math.random() * colors.length)];
  }

  // 调用函数生成极坐标图
  getPolarChart();

  // 监听窗口大小变化，重新调整ECharts实例的大小
  window.addEventListener("resize", () => {
    barChart.resize();
    radarChart.resize();
    sunChart.resize();
    areaChart.resize();
    barsChart.resize();
  });
});

const chartContainer1 = ref(null);
const chartContainer2 = ref(null);
const chartContainer3 = ref(null);
const size = ref("100px"); // 水波图的大小
const color1 = ref(["rgba(117, 125, 232, 0.4)", "rgba(117, 125, 232, 0.4)"]); // 第一个水波图的颜色
const color2 = ref(["rgba(89, 165, 245, 0.4)", "rgba(89, 165, 245, 0.4)"]); // 第一个水波图的颜色
const color3 = ref(["rgba(0, 191, 255, 0.4)", "rgba(0, 191, 255, 0.4)"]); // 第一个水波图的颜色
const percentSize = ref(30); // 百分比数字的大小

const drawWaterball = (container, value, color) => {
  if (!container.value) return;

  const chart = echarts.init(container.value); // 初始化 ECharts 实例

  const option = {
    series: [
      {
        type: "liquidFill", // 图表类型为液体填充
        data: [0.5], // 固定水位为 50%
        itemStyle: {
          opacity: 1, // 透明度
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 渐变色
            {
              offset: 0.4,
              color: color.value[0], // 顶端颜色
            },
            {
              offset: 1,
              color: color.value[1], // 底部颜色
            },
          ]),
        },
        radius: "85%", // 水球图的半径，可以根据需要调整
        label: {
          position: ["50%", "50%"], // 百分数的位置
          formatter(param) {
            return `{a|${value}}`; // 格式化标签，显示原始数据
          },
          rich: {
            a: {
              fontSize: percentSize.value, // 百分比字体大小
              color: "#000000", // 字体颜色
              fontFamily: "PingFang SC", // 字体
              fontWeight: 600, // 字体粗细
            },
          },
        },
        backgroundStyle: {
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [
            // 背景渐变色
            {
              offset: 0,
              color: "rgba(229, 247, 255, 1)", // 渐变起始颜色
            },
            {
              offset: 0.5,
              color: "rgba(229, 247, 255, 1)", // 中间颜色
            },
            {
              offset: 1,
              color: "rgba(84, 226, 241, 0.6)", // 渐变结束颜色
            },
          ]),
        },
        outline: {
          borderDistance: 5, // 边框距离
          itemStyle: {
            borderWidth: 0, // 边框宽度
            borderColor: color.value, // 边框颜色
            shadowBlur: 30, // 阴影模糊度
            shadowColor: "rgba(84, 226, 241, 0.6)", // 阴影颜色
          },
        },
      },
    ],
  };

  chart.setOption(option); // 设置图表选项
};
// 初始化水波图
const initializeWaterballs = () => {
  drawWaterball(chartContainer1, 0, color1); // 初始值为 0，使用第一组颜色
  drawWaterball(chartContainer2, 0, color2); // 初始值为 0，使用第二组颜色
  drawWaterball(chartContainer3, 0, color3); // 初始值为 0，使用第三组颜色
};

// 加载数据并更新水波图
const queryData = async () => {
  try {
    const res = await getCount();
    if (res.code === 200) {
      const { jobNum, resumeNum, browseNum } = res.data;
      drawWaterball(chartContainer1, jobNum, color1); // 显示原始数据，使用第一组颜色
      drawWaterball(chartContainer2, resumeNum, color2); // 显示原始数据，使用第二组颜色
      drawWaterball(chartContainer3, browseNum, color3); // 显示原始数据，使用第三组颜色
    } else {
      ElMessage.error("请检查网络问题");
    }
  } catch (error) {
    ElMessage.error("接口调用失败");
    console.error("接口调用失败:", error);
  }
};
// 组件挂载后初始化水波图并调用接口
onMounted(() => {
  initializeWaterballs();
  queryData();
});

//循环表格展示
const tableData = ref([]);

let timer = null;

//获取领域排名
const gettopUniversities = async () => {
  const res = await topUniversities();
  if (res.code === 200) {
    console.log(res);
    tableData.value = res.data;
  }
};
gettopUniversities();

//获取行业排名
const getIndustryCounts = async () => {
  const res = await industryCounts();
  if (res.code === 200) {
    console.log(res);
  }
};

const scrollTable = () => {
  // 获取第一行数据
  const firstRow = tableData.value.shift();
  tableData.value.push(firstRow);
};

onMounted(() => {
  // 设置一个定时器
  timer = setInterval(scrollTable, 2000);
});

//跳转前一页
const turnPagePre = () => {
  router.push({
    path: "/employVisualization",
    // query: { id: noticeData.value.prevId },
  });
};

//跳转后一页
const turnPageNext = () => {
  router.push({
    path: "/employVisualization",
    // query: { id: noticeData.value.nextId },
  });
};
</script>

<style lang="scss" scoped>
// 标题公共样式
.title {
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  color: #1d1c1c;
  padding: 5px 0px 5px 10px;
  margin: 5px;
  display: inline-block;
  background: linear-gradient(
    to right,
    #2999ff,
    rgba(41, 153, 255, 0.8),
    rgba(41, 153, 255, 0.6),
    rgba(41, 153, 255, 0.4),
    rgba(41, 153, 255, 0.2),
    rgba(41, 153, 255, 0)
  );
}

// .border {
//   background: linear-gradient(to left, #2cd5ff, #2cd5ff) left top no-repeat,
//     linear-gradient(to bottom, #2cd5ff, #2cd5ff) left top no-repeat,
//     linear-gradient(to left, #2cd5ff, #2cd5ff) right top no-repeat,
//     linear-gradient(to bottom, #2cd5ff, #2cd5ff) right top no-repeat,
//     linear-gradient(to left, #2cd5ff, #2cd5ff) left bottom no-repeat,
//     linear-gradient(to bottom, #2cd5ff, #2cd5ff) left bottom no-repeat,
//     linear-gradient(to left, #2cd5ff, #2cd5ff) right bottom no-repeat,
//     linear-gradient(to left, #2cd5ff, #2cd5ff) right bottom no-repeat;
//   background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px,
//     2px 20px, 20px 2px;
//   border: 1px solid #073f97;
//   position: relative;
// }

.border {
  background: rgba(255, 255, 255, 0.3);
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px,
    2px 20px, 20px 2px;
  position: relative;
}

.wrapper {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.left {
  width: 33%;
  z-index: 1000;
}

.center {
  width: 34%;
  height: 90vh;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}

.right {
  width: 33%;
}

.echarts-liquidfill {
  display: flex;
  flex-direction: column;
  width: 100%; // 宽度100%
  height: 100%; // 高度100%
  display: flex; // 使用flex布局
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  margin-bottom: 10px;
}

.pageTurning {
  margin-top: 36vh;
  width: 50px;
  height: 45px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 初始阴影效果 */
}

.pageTurningNext:hover {
  transform: translateY(-5px) translateX(5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.pageTurningPre:hover {
  transform: translateY(-5px) translateX(-5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.rightHeader {
  width: 100%;
  height: 80%;
  overflow: hidden;
  padding: 10px; // Add some padding
  box-sizing: border-box; // Include padding in width calculation

  table {
    width: 100%; // Make table fill container
    border-collapse: collapse; // Remove space between cells

    th,
    td {
      padding: 8px 12px; // Add consistent padding
      text-align: center; // Center align content
      border: 1px solid rgba(255, 255, 255, 0.2); // Add subtle borders
    }

    th {
      background-color: rgba(41, 153, 255, 0.3); // Header background
      color: #000; // Header text color
      font-weight: bold; // Make headers bold
      position: sticky;
      top: 0; // Make headers sticky if scrolling
    }

    tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.1); // Zebra striping
    }

    tr:hover {
      background-color: rgba(41, 153, 255, 0.2); // Hover effect
    }
  }
}

.flipArrow {
  transform: rotate(180deg);
  /* 立即旋转 180 度，不使用过渡动画 */
}

:deep(img) {
  width: 80%;
}
</style>
